<template>
  <div class="layout_container">
    <div class="layout_header">
      <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      @select="handleMenuSelect"
      class="index-header-1"
      router
    >
        <el-menu-item class="pointer-events">Saas平台</el-menu-item>
        <el-menu-item class="pointer-events-2"
        index="/procure/Procurement"
        @click="
          da = true;
          db = false;
          dc = false;
          dd = false;
          de = false;
          df = false;
        "
        >采购</el-menu-item
      >
        <el-menu-item class="pointer-events-2"
        index="/order/OrderLista"
        @click="
          da = false;
          db = true;
          dc = false;
          dd = false;
          de = false;
          df = false;
        "
        >销售</el-menu-item
      >
        <el-menu-item class="pointer-events-2"
        index="/stock/OutBound"
        @click="
          da = false;
          db = false;
          dc = true;
          dd = false;
          de = false;
          df = false;
        "
        >库存</el-menu-item
      >
        <el-menu-item class="pointer-events-2"
        index="/orderlist"
        @click="
          da = false;
          db = false;
          dc = false;
          dd = true;
          de = false;
          df = false;
        "
        >资金</el-menu-item
      >
        <el-menu-item class="pointer-events-2"
        index="/routemanage"
        @click="
          da = false;
          db = false;
          dc = false;
          dd = false;
          de = true;
          df = false;
        "
        >行为</el-menu-item
      >
        <el-menu-item class="pointer-events-2"
        index="/company"
        @click="
          da = false;
          db = false;
          dc = false;
          dd = false;
          de = false;
          df = true;
        "
        >系统</el-menu-item
      >
      </el-menu>
      <!-- 用户信息 -->
      <el-menu class="header-user-info" mode="horizontal" router @select="handleMenuSelect" :default-active="activeIndex">
        <el-submenu index="1" class="header-user">
          <template slot="title">
            <span>用户信息</span>
          </template>
          <div class="header-user-header">
            <span>个人信息</span>
            <span slot="title" class="header-user-setting">账户设置</span>
          </div>
            <hr style="width: 93%;">
          <el-menu-item class="header-user-info1">
            <span>•所在部门：销售部</span>
          </el-menu-item>
          <el-menu-item class="header-user-info1">
            <span>•本次登录：2017-07-03 14:36:21</span>
          </el-menu-item>
          <el-menu-item class="header-user-info1">
            <span>•登录地区：广东省深圳市 (IP：183.14.135.1)</span>
          </el-menu-item>
          <el-menu-item class="header-user-info1">
            <span>•上次登录：2017-07-03 14:36:21</span>
          </el-menu-item>
        </el-submenu>
        <el-menu-item index="/login" class="exit">退出</el-menu-item>
      </el-menu>
    </div>
    <el-container>
      <el-aside width="120px" class="index-aside">
        <el-menu
          :default-active="activeIndex"
          @select="handleMenuSelect"
          router
        >
          <el-menu-item-group v-if="da">
            <template slot="title">采购</template>
            <el-menu-item index="/procure/Procurement">采购管理</el-menu-item>
            <el-menu-item index="/procure/ProcureApply">采购申请</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group v-if="db">
            <template slot="title">销售</template>
            <el-menu-item index="/order/OrderLista">订单列表</el-menu-item>
            <el-menu-item index="/order/AddOrder">添加订单</el-menu-item>
          </el-menu-item-group>
          <div class="threeHeader" v-if="dc">
            <el-menu-item-group>
              <template slot="title">出库</template>
              <el-menu-item index="/stock/OutBound">出库管理</el-menu-item>
              <el-menu-item index="/stock/AddOutBound">添加出库单</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">入库</template>
              <el-menu-item index="/stock/WareHousing">入库管理</el-menu-item>
              <el-menu-item index="/stock/AddWareHousing"
                >添加入库单</el-menu-item
              >
            </el-menu-item-group>
          </div>
          <div class="foreHeader" v-if="dd">
            <el-menu-item-group>
              <template slot="title">订单管理</template>
              <el-menu-item index="/orderlist">订单列表</el-menu-item>
              <el-menu-item index="/goodsrecepit">确认收货</el-menu-item>
              <el-menu-item index="/goodsremind">到货提醒</el-menu-item>
              <el-menu-item index="/ordersetup">订单设置</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">退款及退货</template>
              <el-menu-item index="/goodsreturn">退货申请处理</el-menu-item>
              <el-menu-item index="/refundrequest">退款申请处理</el-menu-item>
              <el-menu-item index="/returnreason">退货原因设置</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">快递单管理</template>
              <el-menu-item index="/note">快递单模版</el-menu-item>
              <el-menu-item index="/printing">自定义打印项</el-menu-item>
              <el-menu-item index="/shippinginfo">发货点信息管理</el-menu-item>
            </el-menu-item-group>
          </div>
          <div class="foreHeader" v-if="de">
            <el-menu-item-group>
              <template slot="title">路线管理</template>
              <el-menu-item index="/routemanage">路线管理</el-menu-item>
              <el-menu-item index="/addroute">添加路线</el-menu-item>
              <el-menu-item index="/visitresult">拜访结果查询</el-menu-item>
              <el-menu-item index="/visitstatistics">拜访统计</el-menu-item>
              <el-menu-item index="/uploadinfo">上传信息管理</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">销售动态</template>
              <el-menu-item index="/personnelsale">人员销售动态</el-menu-item>
              <el-menu-item index="/goodssale">商品销售动态</el-menu-item>
              <el-menu-item index="/storesale">门店销售动态</el-menu-item>
            </el-menu-item-group>
          </div>
         <div class="foreHeader" v-if="df">
            <el-menu-item-group>
              <template slot="title">基本资料</template>
              <el-menu-item index="/company">公司信息</el-menu-item>
              <el-menu-item index="/bmgl">部门管理</el-menu-item>
              <el-menu-item index="/position">职位管理</el-menu-item>
              <el-menu-item index="/staff">员工管理</el-menu-item>
              <el-menu-item index="/warehouse">仓库管理</el-menu-item>
              <el-menu-item index="/unit">计量单位</el-menu-item>
              <el-menu-item index="/log">操作日志</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">客户管理</template>
              <el-menu-item index="/customerinformation">客户信息</el-menu-item>
              <el-menu-item index="/customertype">客户类型</el-menu-item>
              <el-menu-item index="/customerarea">客户区域</el-menu-item>
              <el-menu-item index="/supplier">供货厂商</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">商品管理</template>
              <el-menu-item index="/branding">品牌管理</el-menu-item>
              <el-menu-item index="/productinformation">商品信息维护</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">价格管理</template>
              <el-menu-item index="/pricesystem">价格体系设置</el-menu-item>
            </el-menu-item-group>
          </div>
        </el-menu>
      </el-aside>
      <el-main class="index-main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      da: true,
      db: false,
      dc: false,
      dd: false,
      de: false,
      df: false,
    };
  },
  methods: {
    handleMenuSelect(index) {
      this.activeIndex = index; // 更新选中的导航项
    },
  },
};
</script>
<style>
.layout_container {
  height: 100%;
}

.layout_header {
  background-color: rgba(52, 152, 219, 1) !important;
  height: 60px;
  display: flex;
  justify-content: space-between;
}

.index-header-1 {
  background-color: rgba(52, 152, 219, 1) !important;
  display: flex;
}

.index-header-1 .pointer-events-2, .header-user span {
  color: rgb(0, 0, 0) !important;
}
.pointer-events {
  pointer-events: none;
  font-weight: bold !important;
  font-size: 24px !important;
  color: #fff !important;
}
.el-aside {
  background-color: rgba(234, 237, 241, 1);
  height: 100%;
}
.index-main {
  background-color: #fff;
  height: 100%;
}

.header-user-header {
  font-size: 13px;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  color: #909399;
}

.header-user-setting {
  color: rgba(26, 188, 156, 1);
  cursor: pointer;
}

.header-user-setting:hover {
  color: #409eff;
}

.header-user-info {
  background-color: rgba(52, 152, 219, 1) !important;

}

.header-user-info .exit {
  color: #000000 !important;
  cursor: pointer;
}
</style>